<template>
  <div :class="$style.board">
    <el-dialog v-model="open" fullscreen :before-close="backStorage">
      <template #title>
        <div :class="$style.headerbg">
          <img
            style="
              position: absolute;
              left: 22px;
              top: 32px;
              display: inline-block;
              width: auto;
              height: 38px;
            "
            src="../../../assets/images/favorite3_white.png"
          />
          <H1>注塑产能报表</H1>
        </div>
        <div
          style="
            color: #ffd700;
            text-align: center;
            font-size: 20px;
            line-height: 48px;
          "
        >
          {{ !select ? "当前实时时间" : "日期" }}:{{ nowTime }} 班次：{{ BcDm }}
        </div>
      </template>
      <div :class="$style.boardbg">
        <div style="display: flex; margin-top: 10px">
          <div style="width: 50%; padding-left: 20px; padding-right: 10px">
            <el-table
              :row-key="keyFunc"
              border
              :data="rzmDataOne"
              :cell-style="iCellStyle"
              :cell-class-name="tableRowClassNameC"
              :header-cell-style="iHeaderCellStyle"
            >
              <el-table-column
                label="机台号"
                :show-overflow-tooltip="true"
                min-width="75"
                align="center"
                prop="rzmJtbh"
              />
              <el-table-column
                label="专用号"
                :show-overflow-tooltip="true"
                min-width="80"
                align="center"
                prop="itmCustWldm"
              />
              <el-table-column
                label="品名"
                :show-overflow-tooltip="true"
                min-width="150"
                prop="itmPmgg"
              />
              <el-table-column
                v-if="showZq"
                label="标准周期"
                align="center"
                width="88"
                prop="kbmCxsj"
              />
              <el-table-column
                v-if="showZq"
                label="实际周期"
                align="center"
                width="88"
                prop="kbmSjcxsj"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.kbmSjcxsj - scope.row.kbmCxsj > 2"
                    style="color: red"
                  >
                    {{ scope.row.kbmSjcxsj }}
                  </span>
                  <span v-if="scope.row.kbmSjcxsj - scope.row.kbmCxsj <= 2">
                    {{ scope.row.kbmSjcxsj }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="H1"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="eightNum"
              ></el-table-column>
              <el-table-column
                label="H2"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="elevenNum"
              ></el-table-column>
              <el-table-column
                label="H3"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="fourthNum"
              ></el-table-column>
              <el-table-column
                label="H4"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="seventeenNum"
              />
              <el-table-column
                label="累计不良"
                :show-overflow-tooltip="true"
                align="center"
                min-width="85"
                prop="totalBl"
              />
              <el-table-column
                label="累计产出"
                :show-overflow-tooltip="true"
                align="center"
                min-width="85"
                prop="totalNum"
              />
            </el-table>
          </div>

          <div style="width: 50%; padding-left: 10px; padding-right: 20px">
            <el-table
              id="NoPlanAssign"
              border
              :data="rzmDataTwo"
              :cell-style="iCellStyle"
              :header-cell-style="iHeaderCellStyle"
            >
              <el-table-column
                label="机台号"
                :show-overflow-tooltip="true"
                min-width="75"
                align="center"
                prop="rzmJtbh"
              />
              <el-table-column
                label="专用号"
                :show-overflow-tooltip="true"
                min-width="80"
                align="center"
                prop="itmCustWldm"
              />
              <el-table-column
                label="品名"
                :show-overflow-tooltip="true"
                min-width="150"
                prop="itmPmgg"
              />
              <el-table-column
                v-if="showZq"
                label="标准周期"
                align="center"
                width="88"
                prop="kbmCxsj"
              />
              <el-table-column
                v-if="showZq"
                label="实际周期"
                align="center"
                width="88"
                prop="kbmSjcxsj"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.kbmSjcxsj - scope.row.kbmCxsj > 2"
                    style="color: red"
                  >
                    {{ scope.row.kbmSjcxsj }}
                  </span>
                  <span v-if="scope.row.kbmSjcxsj - scope.row.kbmCxsj <= 2">
                    {{ scope.row.kbmSjcxsj }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="H1"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="eightNum"
              />
              <el-table-column
                label="H2"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="elevenNum"
              />
              <el-table-column
                label="H3"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="fourthNum"
              />
              <el-table-column
                label="H4"
                :show-overflow-tooltip="true"
                min-width="55"
                align="center"
                prop="seventeenNum"
              />
              <el-table-column
                label="累计不良"
                :show-overflow-tooltip="true"
                align="center"
                min-width="85"
                prop="totalBl"
              />
              <el-table-column
                label="累计产出"
                :show-overflow-tooltip="true"
                min-width="90"
                align="center"
                prop="totalNum"
              />
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";

export default {
  name: "BoardInjectionAnalyse",
  props: {
    select: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rzmDataOne: [],
      rzmDataTwo: [],
      showGroup: [],
      BcDm: "白班",
      nowTime: null,
      date: this.$moment().format("YYYY-MM-DD"),
      open: true,
      showZq: false,
      count: 0,
      timer2: null,
      rowHeight: 47,
    };
  },

  mounted() {
    if (this.taskGetList) clearInterval(this.taskGetList);
    this.taskGetList = setInterval(() => {
      this.getList();
    }, 20000);
    this.getList();
    if (!this.select) {
      if (this.taskTime) clearInterval(this.taskTime);
      this.taskTime = setInterval(() => {
        this.nowTime = this.$moment().format("yyyy年MM月DD日 HH:mm:ss");
      }, 1000);
      this.nowTime = this.$moment().format("yyyy年MM月DD日 HH:mm:ss");
    } else {
      this.nowTime = this.$moment(this.date).format("yyyy年MM月DD日");
    }
  },
  destroyed() {
    if (this.taskTime) clearInterval(this.taskTime);
    if (this.taskGetList) clearInterval(this.taskGetList);
  },
  methods: {
    tableRowClassNameC({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "success-cell";
      }
      return "";
    },
    keyFunc(row) {
      return row.id;
    },
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        return `padding:3px 0;color:rgb(247,248,249);background: linear-gradient(#009efd, #66a6ff,#009efd);font-family:"微软雅黑";font-size: 18px; height: ${this.rowHeight}px;`;
      } else {
        return `padding:3px 0;color:rgb(247,248,249);background: linear-gradient(#5d65bd, #5174d9,#5d65bd);font-family:"微软雅黑";font-size: 18px; height:${this.rowHeight}px;`;
      }
    },
    iHeaderCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "padding:0px;text-align:center;background: linear-gradient(#5d65bd, #0c136e,#5d65bd);color:rgb(247,248,249);height:40px;font-size: 18px;white-space:normal;";
    },
    getList() {
      if (this.select) {
        BoardService.getInjectionCapacityStatusReport({
          rzmRq: this.$moment(this.date).format("YYYY-MM-DD"),
          rzmBcdm: this.BcDm === "白班" ? "BB" : "YB",
        }).then((res) => {
          res = res.data;
          if (this.showGroup.length > 0) {
            res.list1 = res.list1.filter((o) =>
              this.showGroup.includes(o.jtmBbdm)
            );
          }
          this.showZq = true;
          let len = Math.ceil(res.list1.length / 2);
          this.rzmDataOne = res.list1.slice(0, len);
          this.rzmDataTwo = res.list1.slice(len);
        });
      } else {
        BoardService.getInjectionCapacityStatus().then((res) => {
          res = res.data;
          if (this.showGroup.length > 0) {
            res.list1 = res.list1.filter((o) =>
              this.showGroup.includes(o.jtmBbdm)
            );
          }
          this.BcDm = res.bcdm;
          this.showZq = res.flag !== "false";
          let len = Math.ceil(res.list1.length / 2);
          if (len > 19) this.rowHeight = 25;
          else this.rowHeight = 47;
          this.rzmDataOne = res.list1.slice(0, len);
          this.rzmDataTwo = res.list1.slice(len);
        });
      }
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.query.showGroup) vm.showGroup = to.query.showGroup;
      // 通过 `vm` 访问组件实例
    });
  },
  beforeRouteLeave(to, from, next) {
    if (this.taskTime) clearInterval(this.taskTime);
    if (this.taskGetList) clearInterval(this.taskGetList);
    next();
  },
};
</script>
<style lang="scss" module>
@use "./board.scss";
// .board {
//   height: calc(100vh - 84px);
// }
.board {
  :global {
    .el-dialog {
      .el-dialog__header,
      .el-dialog__body {
        padding: 0;
        height: auto;
      }
    }
    .el-table th > .cell {
      white-space: normal;
      display: inline;
      padding: 0px 5px;
    }
  }
  .con {
    > div {
      display: inline-block;
      margin-left: 20px;
      > span {
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
  .headerbg {
    width: 100%;
    background: url("../../../assets/images/image.png") round;
    background-position: 0px 0px;
    height: 80px;
    h1 {
      font-size: 36px;
      color: #81e7ed;
      text-align: center;
      line-height: 80px;
      font-family: 黑体;
      /* text-shadow: 1px 1px #b1bbca, 3px 2px #b1bbca; */
      letter-spacing: 20px;
      font-weight: 700;
    }
    // margin-top: 5px;
  }
}
</style>
